<template>
  <div>
    <!-- computed -->
    <!-- 1、计算属性的初衷是让将复杂的计算逻辑从模板中抽离出来，增强可维护性的 -->
    <!-- 2、计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生变化时重新求值，这是计算属性和函数的最大区别 -->
    <!-- 3、计算属性默认使用get方法，也可设置set方法 -->
    <p>ComputedDemo </p>
    {{num}}
    {{doubleNum1}}
    <input type="text" v-model="doubleNum2">
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1
    }
  },
  computed: {
    doubleNum1() {
      return this.num * 2;
    },
    doubleNum2: {
      get() {
        return this.num * 2;
      },
      set(val) {
        this.num = val/2;
      }
    }
  }
}
</script>